<div class="k-tabstrip-wrapper">
    <style type="text/css">
        [tab-strip] .k-content.no-border {
            border: none transparent;
        }

        [tab-strip] .tab-name {
            display: inline-block;
            max-width: 120px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        [tab-strip] li.k-item {
            max-width: 148px;
        }

        [tab-strip] .k-state-active .border-cover {
            width: 100%;
            background-color: #fff;
            position: absolute;
            height: 1px;
            bottom: -1px
        }

        #contextMenu ul li:hover {
            background-color: lightgrey;
        }

        .k-tabstrip .k-content.ng-hide {
            display: block !important;
            height: 0;
            overflow: hidden;
            border: none;
            margin: 0;
        }
    </style>
    <div class="k-widget k-header k-tabstrip" role="tablist">
        <ul class="k-tabstrip-items k-reset" ng-show="tabService.hasTabs()">
            <li ng-repeat="tab in tabService.getTabs() track by tab.id"
                ng-class="{'k-state-active k-tab-on-top':tabService.activeTab()===$index, 'k-first':$first, 'k-last':$last}"
                content-id="{{tab.id}}"
                data-index="{{$index}}"
                context-menu
                class="k-item k-state-default" role="tab">
                <span class="k-loading k-complete"></span>
                <span ng-click="tabService.activeTab($index)"
                      title="{{tab.name}}"
                      class="k-link">
                    <span class="tab-name">{{tab.name}}</span>
                    <span ng-click="tabService.removeTab($index)" ng-if="!$first"
                          class="k-icon k-i-close" style="margin:2px -2px 0 -3px;">Close</span>
                </span>

                <div class="border-cover"></div>
            </li>
        </ul>
        <div id="contextMenu" ng-show="tabService.contextMenuOpened"
             style="position:absolute;z-index:999;width: 120px;height: 100px;border: 2px solid lightgrey;background-color: #f7f7f9;cursor: default;">
            <ul style="list-style: none;margin-right: 5px;margin-bottom: 5px;font-size: 12px;padding-left:16px;margin-top: 7px;">
                <li style="padding: 3px;" ng-click="closeTab()">关闭标签页</li>
                <li style="padding: 3px;" ng-click="closeOtherTab()">关闭其他标签页</li>
                <li style="padding: 3px;" ng-click="closeAllTab()">关闭所有标签页</li>
                <li style="padding: 3px;" ng-click="refreshTab()">刷新标签页</li>
            </ul>
        </div>
        <div ng-repeat="tab in tabService.getTabs() track by tab.id"
             ng-class="{'k-state-active':tabService.activeTab()===$index, 'no-border':!tabService.hasTabs()}"
             ng-show="tabService.activeTab()===$index"
             id="{{tab.id}}"
             style="display: block;margin-top: -0.1px;margin-bottom: 0;border-bottom: none"
             class="k-content" role="tabpanel">
            <iframe ng-if="!$first"
                    ng-src="{{getTabUrl(tab)}}"
                    data-index="{{$index}}"
                    ng-style="{'height':getHeight(tab)+'px'}"
                    frameborder="0"></iframe>
            <div ng-if="$first" panel-container style="padding: 5px"></div>
        </div>
    </div>
</div>